<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的QQ空间</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="logo">
                <<i class="fab fa-qq"></</i> 我的空间
            </div>
            <div class="search-box">
                <input type="text" placeholder="搜索好友、动态...">
                <button class="search-btn"><<i class="fas fa-search"></</i></button>
            </div>
            <div class="nav-links">
                <a href="#" class="active"><<i class="fas fa-home"></</i> 首页</a>
                <a href="#"><<i class="fas fa-image"></</i> 相册</a>
                <a href="#"><<i class="fas fa-video"></</i> 视频</a>
                <a href="#"><<i class="fas fa-book"></</i> 日志</a>
                <a href="#"><<i class="fas fa-cog"></</i> 设置</a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container main-content">
        <!-- 左侧个人信息栏 -->
        <aside class="sidebar-left">
            <!-- 个人资料卡片 -->
            <div class="profile-card">
                <div class="cover-photo">
                    <img src="assets/images/cover.jpg" alt="封面照片">
                    <button class="edit-btn cover-edit"><<i class="fas fa-camera"></</i></button>
                </div>
                <div class="avatar-container">
                    <img src="assets/images/avatar.jpg" alt="个人头像" class="avatar">
                    <button class="edit-btn avatar-edit"><<i class="fas fa-camera"></</i></button>
                </div>
                <div class="profile-info">
                    <h2 class="username">星辰大海</h2>
                    <p class="signature">热爱生活，记录每一个精彩瞬间 ✨</p>
                    <div class="profile-stats">
                        <span class="stat-item">
                            <span class="stat-value">52</span>
                            <span class="stat-label">动态</span>
                        </span>
                        <span class="stat-item">
                            <span class="stat-value">18</span>
                            <span class="stat-label">相册</span>
                        </span>
                        <span class="stat-item">
                            <span class="stat-value">9</span>
                            <span class="stat-label">视频</span>
                        </span>
                        <span class="stat-item">
                            <span class="stat-value">24</span>
                            <span class="stat-label">日志</span>
                        </span>
                    </div>
                </div>
            </div>

            <!-- 联系方式模块 -->
            <div class="contact-module">
                <h3 class="module-title"><<i class="fas fa-address-card"></</i> 联系方式</h3>
                <ul class="contact-list">
                    <li><<i class="fas fa-qq"></</i> QQ: 123456789</li>
                    <li><<i class="fas fa-wechat"></</i> 微信: xingchen123</li>
                    <li><<i class="fas fa-envelope"></</i> 邮箱: example@qq.com</li>
                    <li><<i class="fas fa-map-marker-alt"></</i> 地址: 北京市朝阳区</li>
                </ul>
            </div>

            <!-- 好友列表模块 -->
            <div class="friends-module">
                <h3 class="module-title"><<i class="fas fa-users"></</i> 好友列表</h3>
                <div class="friends-list" id="friendsList">
                    <!-- 好友列表通过JS异步加载 -->
                </div>
                <a href="#" class="see-more">查看更多 <<i class="fas fa-angle-right"></</i></a>
            </div>
        </aside>

        <!-- 中间动态内容区 -->
        <section class="content-middle">
            <!-- 发布动态模块 -->
            <div class="post-module">
                <div class="post-header">
                    <img src="assets/images/avatar.jpg" alt="头像" class="post-avatar">
                    <textarea placeholder="分享新鲜事..." class="post-input" id="postContent"></textarea>
                </div>
                <div class="post-tools">
                    <button class="tool-btn"><<i class="fas fa-image"></</i> 图片</button>
                    <button class="tool-btn"><<i class="fas fa-video"></</i> 视频</button>
                    <button class="tool-btn"><<i class="fas fa-smile"></</i> 表情</button>
                    <button class="tool-btn"><<i class="fas fa-map-marker-alt"></</i> 位置</button>
                    <button class="post-btn" id="publishPost">发布</button>
                </div>
            </div>

            <!-- 内容标签页 -->
            <div class="content-tabs">
                <button class="tab-btn active" data-tab="all">全部动态</button>
                <button class="tab-btn" data-tab="image">图片</button>
                <button class="tab-btn" data-tab="video">视频</button>
                <button class="tab-btn" data-tab="log">日志</button>
            </div>

            <!-- 动态内容列表 -->
            <div class="feed-list" id="feedList">
                <!-- 动态内容通过JS异步加载 -->
                <div class="loading">
                    <<i class="fas fa-spinner fa-spin"></</i> 加载中...
                </div>
            </div>
        </section>

        <!-- 右侧侧边栏 -->
        <aside class="sidebar-right">
            <!-- 相册预览模块 -->
            <div class="album-preview">
                <h3 class="module-title"><<i class="fas fa-images"></</i> 相册预览</h3>
                <div class="album-grid" id="albumGrid">
                    <!-- 相册预览通过JS异步加载 -->
                </div>
                <a href="#" class="see-more">进入相册 <<i class="fas fa-angle-right"></</i></a>
            </div>

            <!-- 视频预览模块 -->
            <div class="video-preview">
                <h3 class="module-title"><<i class="fas fa-video"></</i> 视频预览</h3>
                <div class="video-list" id="videoList">
                    <!-- 视频预览通过JS异步加载 -->
                </div>
                <a href="#" class="see-more">查看全部 <<i class="fas fa-angle-right"></</i></a>
            </div>

            <!-- 日志推荐模块 -->
            <div class="log-recommend">
                <h3 class="module-title"><<i class="fas fa-book"></</i> 最新日志</h3>
                <div class="log-list" id="logList">
                    <!-- 日志列表通过JS异步加载 -->
                </div>
                <a href="#" class="see-more">更多日志 <<i class="fas fa-angle-right"></</i></a>
            </div>

            <!-- 访客记录模块 -->
            <div class="visitor-module">
                <h3 class="module-title"><<i class="fas fa-eye"></</i> 最近访客</h3>
                <div class="visitors-list" id="visitorsList">
                    <!-- 访客记录通过JS异步加载 -->
                </div>
            </div>
        </aside>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>© 2024 我的QQ空间 - 版权所有</p>
            <div class="footer-links">
                <a href="#">关于我们</a>
                <a href="#">使用条款</a>
                <a href="#">隐私政策</a>
                <a href="#">帮助中心</a>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>